<template>
  <div class="test-users">
    <h2>用户列表测试</h2>
    
  <div class="search-form">
      <input v-model.trim="searchForm.nickname" placeholder="昵称" @keyup.enter="onSearch" />
      <input v-model.trim="searchForm.account" placeholder="账号" @keyup.enter="onSearch" />
      <input v-model.trim="searchForm.phone" placeholder="手机号" @keyup.enter="onSearch" />
      <input v-model.trim="searchForm.email" placeholder="邮箱" @keyup.enter="onSearch" />
      <button @click="onSearch">搜索</button>
      <button class="reset" @click="onReset">重置</button>
    </div>

    <table class="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>昵称</th>
          <th>账号</th>
          <th>手机号</th>
          <th>邮箱</th>
          <th>公司ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.nickname || '-' }}</td>
          <td>{{ user.account || '-' }}</td>
          <td>{{ user.phone || '-' }}</td>
          <td>{{ user.email || '-' }}</td>
          <td>{{ user.companyInfoID || '-' }}</td>
        </tr>
        <tr v-if="!loading && users.length === 0">
          <td colspan="6" class="empty">暂无数据</td>
        </tr>
      </tbody>
    </table>

    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>

    <div class="pager" v-if="!loading">
      <div class="pager-left">
        共 {{ totalCount }} 条 · 每页
        <select v-model.number="pageSize" @change="onPageSizeChange">
          <option :value="10">10</option>
          <option :value="20">20</option>
          <option :value="50">50</option>
          <option :value="100">100</option>
        </select>
      </div>
      <div class="pager-right">
        <button :disabled="currentPage === 1" @click="goPrev">上一页</button>
        <span class="page-info">第 {{ currentPage }} / {{ totalPage }} 页</span>
        <button :disabled="currentPage >= totalPage" @click="goNext">下一页</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { examineApi } from '@/api'

type UserItem = {
  id: number
  nickname?: string
  account?: string
  phone?: string
  email?: string
  companyInfoID?: number
}

const users = ref<UserItem[]>([])
const loading = ref(false)
const error = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalCount = ref(0)
const totalPage = ref(1)

const searchForm = reactive({
  nickname: '',
  account: '',
  phone: '',
  email: ''
})

async function fetchUsers() {
  loading.value = true
  error.value = ''
  
  try {
    const res = await examineApi.getUsers({
      Pageindex: currentPage.value,
      PageSize: pageSize.value,
      ...searchForm
    })

    // 兼容多种返回包裹结构与大小写
    const container: any = (res && (res as any).data) ? (res as any).data : res
    const list: any[] = Array.isArray(container?.data)
      ? container.data
      : (Array.isArray(container?.Data) ? container.Data : (Array.isArray(container) ? container : []))

    users.value = list.map((x: any) => ({
      id: x.id ?? x.Id ?? 0,
      nickname: x.nickname ?? x.Nickname ?? '',
      account: x.account ?? x.Account ?? '',
      phone: x.phone ?? x.Phone ?? '',
      email: x.email ?? x.Email ?? '',
      companyInfoID: x.companyInfoID ?? x.CompanyInfoID ?? 0,
    }))

    const cnt = container?.TotalCount ?? container?.totalCount ?? container?.Total ?? users.value.length
    totalCount.value = Number.isFinite(cnt) ? Number(cnt) : users.value.length
    const tp = container?.TotalPage ?? container?.totalPage ?? Math.max(1, Math.ceil(totalCount.value / pageSize.value))
    totalPage.value = Number.isFinite(tp) ? Math.max(1, Number(tp)) : 1
  } catch (e) {
    error.value = '加载用户失败: ' + (e as Error).message
    console.error('加载用户失败', e)
  } finally {
    loading.value = false
  }
}

function onSearch() {
  currentPage.value = 1
  fetchUsers()
}

function onReset() {
  searchForm.nickname = ''
  searchForm.account = ''
  searchForm.phone = ''
  searchForm.email = ''
  currentPage.value = 1
  fetchUsers()
}

function onPageSizeChange() {
  currentPage.value = 1
  fetchUsers()
}

function goPrev() {
  if (currentPage.value > 1) {
    currentPage.value -= 1
    fetchUsers()
  }
}

function goNext() {
  if (currentPage.value < totalPage.value) {
    currentPage.value += 1
    fetchUsers()
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.test-users {
  padding: 16px;
}

.search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-form input {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  flex: 1;
}

.search-form button {
  padding: 6px 12px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-form .reset {
  background: #909399;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.user-table th,
.user-table td {
  border: 1px solid #eaeaea;
  padding: 8px;
  text-align: left;
}

.user-table .empty {
  text-align: center;
  color: #909399;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.error {
  text-align: center;
  padding: 20px;
  color: #ff4d4f;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.pager-left select {
  margin-left: 6px;
  padding: 4px 6px;
}

.pager-right button {
  padding: 6px 12px;
  margin: 0 6px;
}

.page-info {
  color: #606266;
}
</style>



